<template>
	<view>

		<l-painter :board="poster" ref="painter" />
	</view>
</template>
<script>
	import {
		formatPrice
	} from '@/utils/tools'
	export default {
		name: "share-csppl-poster",
		props: {
			options: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {};
		},
		computed: {
			poster() {

				return {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '600rpx',
						padding: '40rpx',
						backgroundColor: 'rgba(255, 255, 255, 1)',
						borderRadius: '10rpx',
					},
					views: [{
							css: {
								display: 'flex',
								flexDirection: 'row',
								alignItems: 'center',
								marginBottom: '20rpx',
							},
							type: "view",
							views: [

								{
									css: {
										width: '94rpx',
										height: '94rpx',
										borderRadius: '50%',
										marginRight: '24rpx',
										overflow: 'hidden',
									},
									type: "view",
									views: [{
										css: {
											width: '100%',
											height: '100%',
										},
										src: this.options.avatar,
										type: "image",
									}],

								},
								{
									views: [{
											text: this.options.user_name,
											type: "text",
											css: {
												display: "block",
												paddingBottom: "10rpx",
												color: "rgba(38, 38, 38, 1)",
												fontSize: "28rpx",
												fontWeight: "bold",
												textAlign: 'left',
											}
										},
										{
											text: this.$zhTran("向您分享了一个购物链接"),
											type: "text",
											css: {
												color: "rgba(95, 95, 95, 1)",
												fontSize: "24rpx"
											},
										}
									],
									type: "view",
								},

							],
						},
						{
							css: {
								fontSize: "28rpx",
								fontWeight: '550',
								color: 'rgba(22, 22, 22, 1)',
								marginTop: '30rpx',
								marginBottom: '20rpx',
								textAlign: 'left',
							},
							text: this.options.good_name,
							type: "text",
						},
						{
							css: {
								width: '100%',
								height: '454rpx',
								borderRadius: '16rpx',
							},
							src: this.options.share_image,
							type: "image",
						},



						{
							css: {
								marginTop: '40rpx',
								width: '100%',
								padding: '0',
							},
							type: "view",
							views: [{
									css: {
										width: '100%',
										textAlign: 'center',
										marginBottom: '20rpx',
									},
									type: "view",
									views: [{
										css: {
											width: '180rpx',
											height: '180rpx',

										},
										src: this.options.qr_code,
										type: "image",
									}]
								},
								{
									css: {
										width: '100%',
										textAlign: 'center',
									},
									type: "view",
									views: [{
										css: {
											color: 'rgba(96, 98, 102, 1)',
											fontSize: '24rpx',
										},
										text: this.$zhTran('扫码购买商品'),
										type: "text",
									}]
								}
							]
						},
					]
				}
			},
		},
		methods: {
			drawCanvas() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "png",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: "url",
					quality: 1,
					success: (res) => {
						this.$emit("success", res.tempFilePath);
					},
					fail: () => {
						this.$emit("fail");
					},
					complete: () => {
						this.$emit("complete");
					},
				});
			},
		},
	};
</script>

<style>

</style>